Skip to main content

דוגמא קומפוננטת חיפוש

ניצור קומפוננטת חיפוש ללא כפתור.

הקומפוננטה מציגה תיבת טקסט שבה מכניסים את ערך החיפוש.

search.component.html
<input type="text" #txtNum (input)="onValueChange(txtNum.value)">

קודם נציג ל-console את הערך של החיפוש שמקבלים מתיבת הטקסט.

search.component.ts
onValueChange(str:string){
console.log(str);
}

עם הקוד הזה אנחנו מחפשים כל פעם כשנכנסת אות, אנחנו רוצים לחפש רק כשיש צורך, כלומר שמפסיקה ההקלדה.

נגדיר subject שיזרוק לנו את האירוע של ההקלדה.

search.component.ts
private searchWordChange = new Subject<string>();

ngOnInit(): void{
this.searchWordChange.subscribe(newWord => {
console.log(newWord);
})
}

onValueChange(str:string){
this.searchWordChange.next(str);
}

נשתמש ב-filter כדי להתחיל את החיפוש רק כשיש יותר מ-2 אותיות.

search.component.ts
private searchWordChange = new Subject<string>();

ngOnInit(): void {
this.searchWordChange.pipe(
filter((x) => x.length > 2)
).subscribe(newWord => {
console.log(newWord);
})
}

onValueChange(str:string){
this.searchWordChange.next(str);
}

אפשר להשתמש ב-pipe של debounceTime להתחיל את החיפוש רק כשעובר זמן ללא הקלדה.

search.component.ts
private searchWordChange = new Subject<string>();

ngOnInit(): void {
this.searchWordChange.pipe(
filter((x) => x.length > 2),
debounceTime(500)
).subscribe(newWord => {
console.log(newWord);
})
}

onValueChange(str:string){
this.searchWordChange.next(str);
}

פעולת החיפוש היא א-סנכרונית, אז אפשר לשלב observables בתהליך. את תוצאת החיפוש נשמור לתוך פרמטר בקומפוננטה שאנחנו משתמשים בחיפוש.